<template>
  <div class="container" @click="handleGallayClose">
    <div class="wrapper">
   <swiper :options="swiperOption"  >
    <!-- slides -->
    <swiper-slide v-for="(item,index) of images" :key="index">
     <img  class="gallary-img"  :src="item" >
      </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: "commonGallary",
  props:{
    images:Array,
    default:[]
  },
  data() {
    return {
      swiperOption: {
        pagination: ".swiper-pagination",
        paginationType: "fraction", //下标的样式， 采用分页的样子
        observer: true, //修改swiper自己或子元素时(DOM)，D自动初始化swiper .
        //例如V-SHOW的时候，DOM结点会发生变化。swiper需要重新计算长宽。要不会卡顿一下会。 所以需要用到这两个属性去监听
        observeParents: true //修改swiper的父元素时(DOM)，自动初始化swiper
      }
    };
  },
  methods:{
    handleGallayClose(){
      this.$emit('close')
    }
  }
};
</script>

<style lang="stylus" scoped>
/**
 作为一个程序员，命名要规范。
 对于修改swiper或者vux里面的组件。 本vue最大的.Class >>> 修改的类名
 因为我们想到分页放到黑色部分那里。但是又不能放在swiper外面。 看了下swiper封装的组件。
 发现最外层的.swiper-container 还有overflow:hidden。 这里想修改的话。 需要修改此overflow:inherit。
*/
.container >>> .swiper-container {
  overflow: inherit;
}

.container {
  display: flex;
  // flex-direction row;
  // justify-content center;
  align-items: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background: black;

  .wrapper {
    // flex: 1;
    // 撐出一个正方形的高度
    width: 100%;
    // overflow: hidden;
    height: 0;
    padding-bottom: 100%;
  }

  .gallary-img {
    width: 100%;
  }

  .swiper-pagination-fraction {
    color: #ffffff;
    bottom: -1rem;
  }
}
</style>


